<template>
    <div>
        <h1>待办事项</h1>
        <div class="common-layout">
        <el-container>
            <el-header><SonHeader @add="addHandle"/></el-header>
            <el-main><SonMain :list="list" @changeD="changeHandle" @del="delHandle"/></el-main>
            <el-footer><SonFooter :list="list" @show="showHandle"/></el-footer>
        </el-container>
    </div></div>
</template>

<script>
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';
import SonFooter from '@/components/ToDo/SonFooter.vue';


export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter
    
},
created(){
    this.copyList= this.list.slice()    //创建一个中间数组，用来处理一些过程数据的转换
},   //生命周期钩子函数，表示页面在创建时将执行的代码
            data(){
                return{
                    list:[{
                    id: '2016-05-04',
                    content: '完成第一章学习',
                    startDate: '2024.10.29',
                    finishDate:'',
                    state:false
                },
                {
                    id: '2016-05-04',
                    content: '完成第二章学习',
                    startDate: '2024.10.29',
                    finishDate:'',
                    state:false
                },
                {
                    id: '2016-05-04',
                    content: '完成第三章学习',
                    startDate: '2024.10.29',
                    finishDate:'',
                    state:false
                },
                {
                    id: '2016-05-04',
                    content: '完成第一章学习',
                    startDate: '2024.10.29',
                    finishDate:'',
                    state:false
                }
            ],
            now:new Date(),
            copyList:[]
                }

            },
            methods:{
                addHandle(val){
                    //通过数组方法push，把数据插入到数组的末尾

                    this.list.push({id:+ new Date(),
                                    content:val,
                                    startDate:this.fomateDate,
                                    finishDate:'',
                                    state:false

                        
                    },
                    this.copyList= this.list.slice() )

                },
                changeHandle(i){
                    this.list[i].finishDate=this.fomateDate
                    this.copyList= this.list.slice() 
                },
                delHandle(i){
                    //
                    this.list.splice(i,1)
                    this.copyList= this.list.slice() 
                },
                showHandle(v){
                    if(v=='all'){
                        this.copyList= this.copyList.slice() 
                        
                    }else if(v=='done'){
                        this.list=this.copyList.filter(v=> v.state==true)  //过滤方法，把符合要求的数据筛选出来

                        
                    }else if(v=='undo'){
                        this.list=this.copyList.filter(v=> v.state==false)  
                    }else{
                        this.list=[]
                        this.copyList=[]
                    }
                }
            },
            computed:{
                fomateDate(){
                    let month =this.now.getMonth()+1
                    return this.now.getFullYear() +'-'+month+'-'+ this.now.getDate()
                }
            }
}
</script>
<style scoped>
/* scoped 限制限制当前样式只作用于当前页面，否则有相同的样式名会，待会影响其他界面 */
#app{
    width: 800px;
    margin: auto;
}
</style>